<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");//2d绘画
//ctx.beginPath();//起始一条路径，或重置当前路径
ctx.arc(150,150,50,0,2*Math.PI);//x,y,r,start,end
//ctx.stroke();//绘制已定义的路径
ctx.fillStyle="red";//填充的颜色
ctx.fill();//填充
</script> 

</body>
</html>